<template>
	<view class="login-container">
		<uni-icons type="contact-filled" size="100" color="#afafaf"></uni-icons>
		<input type="nickname" name="nickname" @change='nameUser' placeholder="请输入昵称"  required="required"/>
		<!-- <button type="primary" class="btn-login" @click="getUserProfile" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">一键登录</button> -->
		<button type="primary" class="btn-login" @click="getUserProfile" >一键登录</button>
		<text class="tips-text">登录后尽享更多权益</text>
	</view>
</template>

<script>
	import {mapMutations,mapState,} from 'vuex'
	export default {
		
		name:"my-login",
		data() {
			return {
				userInfo:{}
			};
		},
		computed:{
			...mapState('m_user',['redirectInfo'])
		},
		methods:{
			//获取用户的基本信息
			// getUserProfile(){
			// 	uni.getUserProfile({
			// 		desc:'用以小程序登录操作',
			// 		success:(res)=>{
			// 			console.log(res)
			// 		},
			// 		fail: (res) => {
			// 			console.log(res)
			// 		}
			// 	})
			// },
			...mapMutations('m_user',['updateUserInfo','updateToken','updateRedirectInfo']),
			async getUserProfile(){
				const [error,res] = await uni.getUserProfile({
					desc:'登录',
				})
				if(error!==null) return uni.$showMsg('用户登录失败')
				// console.log(error)
				// console.log(res)
				// console.log(res[1].errMsg)
				// console.log(res[1].rawData)
				this.getToken(res)
			},
			async getToken(info){
				//获取code对应的值
				const [err,res]=await uni.login().catch(err=>err)
				// console.log(res)
				if(err||res.errMsg!=='login:ok') return uni.$showMsg('登录失败！')
				// console.log(res.code)
				// console.log(info.iv)
				// 准备参数
				const query={
					code:res.code,
					encryptedData:info.encryptedData,
					iv:info.iv,
					rawData:info.rawData,
					signature:info.signature
				}
				// console.log(query)
				const {data: loginResult}=await uni.$http.post('/api/public/v1/users/wxlogin',query)
				// console.log(loginResult)
				// if(loginResult.meta.statue!==200||loginResult.meta.statue!==400) return uni.$showMsg('登录失败')
				uni.$showMsg('登录成功',undefined,'success')
				// 直接将token保存到vuex中
				this.updateToken('Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjIzLCJpYXQiOjE1NjQ3MzAwNzksImV4cCI6MTAwMTU2NDczMDA3OH0.YPt-XeLnjV-_1ITaXGY2FhxmCe4NvXuRnRB8OMCfnPo')
				this.navigateBack()
			},
			//封装跳转函数
			navigateBack(){
				if(this.redirectInfo&&this.redirectInfo.openType==='switchTab'){
					uni.switchTab({
						url:this.redirectInfo.from,
						complete: () => {
							this.updateRedirectInfo(null)
						}
					})
				}
			},
			// 用户头像
			 onChooseAvatar(e){
				 // console.log(e)
				 this.userInfo.avatarUrl = e.detail.avatarUrl;
				  // console.log(this.userInfo);
				  this.updateUserInfo(this.userInfo)
			 },
			 // 用户姓名
			 nameUser(e){
				 // console.log(e.detail.value)
				 this.userInfo.nickName = e.detail.value;
				 if(e.detail.value==='') return uni.$showMsg('请输入用户名！')
				  // console.log(this.userInfo);
				  this.updateUserInfo(this.userInfo)
			 }
		}
	}
</script>

<style lang="scss">
.login-container{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 750rpx;
	background-color: #f8f8f8;
	position: relative;
	overflow: hidden;
	input{
		border: 1px solid red;
		width: 90%;
		height: 40px;
	}
	&::after{
		content: '';
		display: block;
		background-color: white;
		width: 100%;
		height: 40px;
		position: absolute;
		bottom: 0;
		left: 0;
		border-radius: 100%;
		transform: translateY(50%);
	}
	.btn-login{
		width: 90%;
		border-radius:100px ;
		margin: 15px 0;
		background-color: #c00000;
	}
	.tips-text{
		font-size: 12px;
		color:gray
	}
}
</style>